<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width:100px;
				height:100px;
				margin:0 auto;
				background: red;
				/*rotate沿着Z轴旋转*/
				
				/*transform: rotateZ(0deg);===>1·rotateY 沿Y轴旋转   2·rotateX 沿X轴旋转  3·rotateZ 沿Z轴旋转  4·rotate 默认沿Z轴旋转*/
				/*改变旋转中心 left top right bottom center*/
				/*transform-origin: 100% 0%;*/
				transform-origin: bottom center;
				transition: 1s;
			}
			body{
				height:200px;
				border:1px solid red;
			}
			body:hover div{
				transform: rotateZ(180deg);
				/*hover 的时候让他沿Z轴旋转旋转*/
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
